a-radio-button
<template>
  <div class="content">
    <a-spin :spinning="spinning" tip="加载中...">
      <div style="margin: 20px 0">
        <h2>国内疫情</h2>
        <a-row>
          <a-col :lg="{ span: 18 }" :xs="{ span: 18 }">
            数据更新至 {{ total.time }}
          </a-col>
          <a-col :lg="{ span: 4 }" :xs="{ span: 24 }">
            <span class="desc" @click="descptionVisible = true"
              ><a-space>
                <a-icon type="question-circle" />数据说明</a-space
              ></span
            >
          </a-col>
        </a-row>
      </div>
      <!-- 数字区域 -->
      <a-row>
        <a-col
          :lg="{ span: 5, offset: 1 }"
          :xs="{ span: 10, offset: 1 }"
          :md="{ span: 8, offset: 4 }"
        >
          <a-statistic
            title="累计确诊"
            :value="total.confirm"
            style="margin-right: 50px"
            valueStyle="color: #e83132"
        /></a-col>
        <a-col
          :lg="{ span: 5, offset: 1 }"
          :xs="{ span: 10, offset: 1 }"
          :md="{ span: 8, offset: 4 }"
        >
          <a-statistic
            title="累计境外"
            :value="total.input"
            style="margin-right: 50px"
            valueStyle="color: #476da0"
        /></a-col>
        <a-col
          :lg="{ span: 5, offset: 1 }"
          :xs="{ span: 10, offset: 1 }"
          :md="{ span: 8, offset: 4 }"
        >
          <a-statistic
            title="累计治愈"
            :value="total.heal"
            style="margin-right: 50px"
            valueStyle="color: #10aeb5"
        /></a-col>
        <a-col
          :lg="{ span: 5, offset: 1 }"
          :xs="{ span: 10, offset: 1 }"
          :md="{ span: 8, offset: 4 }"
        >
          <a-statistic
            title="累计死亡"
            :value="total.dead"
            style="margin-right: 50px"
            valueStyle="color: #4d5054"
        /></a-col>
      </a-row>
      <!-- 图标内容 -->
      <div style="margin: 20px 0">
        <!-- 初始化echarts需要个 有宽高的 盒子 -->
        <a-row class="mapouter">
          <a-col :xs="{ span: 0 }" :xl="{ span: 24 }">
            <a-radio-group
              v-model="mode"
              @change="
                (e) => {
                  mode = e.target.value;
                  getData();
                }
              "
              default-value="today"
            >
              <a-radio-button value="today"> 今日 </a-radio-button>
              <a-radio-button value="total"> 总数 </a-radio-button>
            </a-radio-group>
            <div
              ref="mapbox"
              style="height: 600px; width: 800px; margin: 30px"
            ></div>
          </a-col>
          <a-col :xs="{ span: 0 }" :xl="{ span: 24 }">
            <div
              ref="data_row"
              style="height: 600px; width: 800px; margin: 30px"
            ></div>
          </a-col>
        </a-row>
      </div>
    </a-spin>

    <a-modal
      v-model="descptionVisible"
      centered
      title="数据说明"
      @ok="descptionVisible = false"
    >
      <p>
        1、数据来源：<br />来自国家卫健委、各省市区卫健委、各省市区政府、港澳台官方渠道公开数据；<br /><br />2、数据统计原则：<br />a)
        每日上午全国数据会优先使用国家卫健委公布的数据（此时各省市数据尚未及时更新，会出现全国数据大于各省份合计数的情况）；<br />b)
        当各省公布数据总和大于国家卫健委公布的数据时，则全国数据切换为各省合计数；<br />c)
        全国数据含港澳台地区数据；<br /><br />3、数据更新时间：<br />实时更新全国、各省市区数据，因需要核实计算，与官方发布的时间相比，将有一定的时间延迟；<br /><br />
      </p>
    </a-modal>
  </div>
</template>

<script>
const option = {
  // ----------   series：地图数据可视化，添加data数据    ---------------------
  series: [
    {
      name: "确诊人数",
      type: "map", // 告诉echarts 要去渲染的是一个地图
      map: "china", // 告诉echarts  要去渲染中国地图
      label: {
        // 控制对应地区的汉字
        show: true,
        color: "#333", // 控制地区名的字体颜色---黑色，省名字
        fontSize: 10,
      },
      itemStyle: {
        // 地图板块的颜色和边框---灰色，各个省界线
        areaColor: "#eee",
        borderWidth: 0.2,
        borderColor: "rgb(178,131,123)",
      },
      zoom: 1.2, // 控制地图的放大和缩小
      emphasis: {
        // 控制鼠标滑过之后的背景色和字体颜色--白色
        label: {
          color: "#000",
          fontSize: 17,
        },
        itemStyle: {
          areaColor: "rgb(254,222,50)", //  滑动到哪个地区就显示蓝色
        },
      },
      data: [], // 用来展示后台给的数据的 {name:xx,value:xxx}
    },
  ],

  //-----------    visualMap：视觉映射，每个颜色代表什么含义   -----------------------------
  visualMap: [
    {
      type: "piecewise",
      show: true,
      // splitNumber:4
      pieces: [
        // 分段
        { min: 10000 },
        { min: 1000, max: 9999 },
        { min: 100, max: 999 },
        { min: 10, max: 99 },
        { min: 1, max: 9 },
      ],
      // align:'right',// 默认left
      // orient:'horizontal' 默认竖直
      // left right 这些属性控制 分段坐在的位置
      // showLabel:false
      // textStyle:{}
      inRange: {
        symbol: "rect",
        color: ["#ffe5db", "#b80909"], //   浅红~~深红色
      },
      itemWidth: 20,
      itemHeight: 10,
    },
  ],

  //-------------------------------------------------------------------
  tooltip: {
    trigger: "item",
  },
  toolbox: {
    show: true,
    orient: "vertical",
    left: "right",
    top: "center",
    feature: {
      // dataView: {readOnly: false},
      // restore: {},
      saveAsImage: {},
    },
  },
};
const option_list = {
  xAxis: {
    type: "category",
    nameLocation: "middle",
    data: [],
  },
  yAxis: {
    name: "单位：例",
  },
  title: {
    text: "全国 总新增确诊 趋势",
  },
  tooltip: {
    trigger: "axis",
    feature: {
      saveAsImage: {},
    },
  },
  series: [
    {
      name: "总新增确诊",
      data: [],
      type: "line",
      smooth: true,
      // 设置颜色
      itemStyle: {
        color: "rgb(244,51,52)",
      },
    },
  ],
};
export default {
  mounted() {
    this.getData();
    // 初始化地图
    this.mychart = this.$echarts.init(this.$refs.mapbox);
    this.mychart.setOption(option);
    this.mychart_lsit = this.$echarts.init(this.$refs.data_row);
    this.mychart_lsit.setOption(option_list);
  },
  data() {
    return {
      // 所有省份数据
      provinces: null,
      // 今日数据或者总数据  today || total
      mode: "today",
      // 加载中
      spinning: false,
      // 总数据
      total: {
        confirm: 0,
        input: 0,
        heal: 0,
        dead: 0,
        time: 0,
      },
      // 描述模态框的显示
      descptionVisible: false,
    };
  },
  methods: {
    // 地图
    getData() {
      this.spinning = true;
      if (this.provinces != null) {
        option.series[0].data = this.provinces.map((item) => ({
          name: item.name,
          value: item[this.mode].confirm,
        }));
        this.mychart.setOption(option);
        this.spinning = false;
        return;
      } else {
        this.$axios.get("/api/util/map.php").then((res) => {
          // 代表请求数据成功
          const {
            data: { data },
          } = res;
          // console.log(data);
          this.total = {
            confirm: data.chinaTotal.total.confirm,
            input: data.chinaTotal.total.input,
            heal: data.chinaTotal.total.heal,
            dead: data.chinaTotal.total.dead,
            time: data.overseaLastUpdateTime,
          };
          const provinces = data.areaTree[2].children;
          // today || total
          option.series[0].data = provinces.map((item) => ({
            name: item.name,
            value: item[this.mode].confirm,
          }));
          if (option_list.series[0].data.length == 0) {
            option_list.series[0].data = [];
            data.chinaDayList.map((item) => {
              option_list.xAxis.data.push(item.date);
              option_list.series[0].data.push(item.today.confirm);
            });
          }

          this.mychart_lsit.setOption(option_list);

          this.provinces = provinces;
          this.mychart.setOption(option);
          this.spinning = false;
          // 这行代码能执行的前提是 DOM已经渲染完成，只有DOM渲染完成才能够执行 echarts初始化
        });
      }
    },
  },
};
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.mapouter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.desc {
  float: right;
  font-size: 12px;
  color: #999999;
  cursor: pointer;
}
</style>
